<template>
    <div class="aaaa">
        <div class="play-container">
            <img style="width: 100%; height: 100%;" :src="imgs">
        </div>
        <div class="top">
            <div class="top-one">
                <van-icon @click="returnGo" name="arrow-left" />
                <div class="hContainer">
                    <h1>{{nextSongObj.name}}</h1>
                    <h2>{{author}}</h2>
                </div>
            </div>
            <div class="img-container">
                <img class="img" :src="imgs" alt="">
            </div>
        </div>
    </div>
</template>
<script>
import Vue from 'vue';
import { Icon } from 'vant';
Vue.use(Icon)
export default {
    data() {
        return {
            animateSelector: '',
            imgs: '',
            author: ''
        }
    },
    mounted() {
        this.$nextTick(() => {
            this.animation()
        })
    },
    methods: {
        animation() {
            this.animateSelector = document.querySelector('.img')
            this.animateSelector.style.webkitAnimationPlayState = 'paused'
        },
        returnGo() {
            this.$router.go(-1)
        }
    },
    props: {
        nextSongObj: {
            type: Object,
            default() {
                return {}
            },
            required: true
        }
    },
    watch: {
        nextSongObj() {
            if (!this.nextSongObj.al) {
                this.imgs = this.nextSongObj.picUrl
                this.author = this.nextSongObj.author
            } else {
                this.imgs = this.nextSongObj.al.picUrl
                this.author = this.nextSongObj.ar[0].name
            }
        }
    }
}
</script>
<style>
.top-one .van-icon {
    font-size: 60px;
    width: 20%;
    color: #fff;
}
</style>

<style lang="scss" scoped>
    .play-container {
        position: absolute;
        background: #222;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: -1;
        opacity: .6;
        filter: blur(20px);
    }
    .top {
        position: relative;
        z-index: 10;
        display: flex;
        flex-direction: column;
        .top-one {
            display: flex;
            padding-left: 10px;
            box-sizing: border-box;
            .hContainer {
                display: flex;
                flex-direction: column;
                width: 60%;
                h1 {
                    text-align: center;
                    line-height: 95px;
                    font-size: 40px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    color: #fff;
                }
                h2 {
                    text-align: center;
                    line-height: 65px;
                    font-size: 40px;
                    text-overflow: ellipsis;
                    overflow: hidden;
                    white-space: nowrap;
                    color: #fff;
                }
            }
        }
        .img-container {
            width: 100%;
            height: 800px;
            margin-top: 60px;
            display: flex;
            justify-content: center;
            img {
                width: 80%;
                height: 100%;
                border-radius: 50%;
                border: 30px solid hsla(0,0%,100%,.1);
                
                transform: rotate(0deg)
                
            }
            .img {
                animation: imgs 15s linear infinite;
            }
        }
        @keyframes imgs {
            0% {
                transform: rotate(0deg)
            }
            100% {
                transform: rotate(360deg)
            }
        }
    }
</style>
